$red : #d33;

.tests {
	margin: 0 auto;
	padding: 40px 0;
	max-width: 1024px;
}

.tests-module {
	margin: 0 0 10px 25%;
	border: 1px solid rgba($black, 0.3);
	background: #fff;
	border-radius: 4px;
	position: relative;
}

.tests-module-title {
	position: absolute;
	top: 0;
	right: 100%;
	width: 50%;
	padding-right: 20px;
	margin: 0;
	line-height: 32px;
	text-align: right;
}

.tests-test {
	font-size: 14px;
	font-family: monospace;

	+ .tests-test {
		border-top: 1px solid rgba($black, 0.1);
	}

	&.has-failed {
		border: 0;
		outline: 1px solid $red;
	}
}

.tests-test-title {
	padding: 5px 14px;
	text-align: right;
	color: rgba($black, 0.5);

	strong {
		float: left;
		color: $black;

		.has-failed & {
			color: $red;
		}
	}
}

.tests-asserts {
	display: none;

	.is-open & {
		display: block;
	}
}

.tests-assert {
	padding: 4px 14px 4px 29px;

	&.has-failed {
		background: rgba($red, 0.1);
		border: 1px solid $red;
		border-width: 1px 0;
		color: $red;
	}

	pre {
		margin: 10px 0;
		background: rgba(#fff, 0.5);
		border-color: $red;
	}
}

#nodeunit-banner {
	@include font-display;
	margin-top: -5px;
	border-radius: 4px;
	line-height: 30px;
	font-size: 24px;
	text-align: right;
	float: right;

	&.has-failed:before {
		position: absolute;
		bottom: -10px;
		height: 6px;
		background: $red;
		content: "";
		left: 0;
		right: 0;
		display: block;
	}

	&.has-failed .fail-label {
		color: $red;
		text-shadow: none;
	}

        .test-num {
                font-family: monospace;
        }
}

.tests-reporting {
	margin-left: 25%;

	.button {
		@include font-display;
		display: block;
		border: 1px solid rgba($black, 0.5);
		text-decoration: none;
		text-align: center;
		background: url(../img/bg.png) 0 50%;
		border-radius: 4px;
		text-shadow: 1px 1px 2px rgba($black, 0.5);
		padding: 10px 15px;
		font-size: 20px;
		line-height: 30px;
		color: $white;

		.is-moment & {
			background-color: $color-moment;

			&:hover {
				background-color: mix($color-moment, $white, 90%);
			}

			&:active {
				background-color: mix($color-moment, $black, 90%);
			}
		}

		.is-moment-timezone & {
			background-color: $color-moment-timezone;

			&:hover {
				background-color: mix($color-moment-timezone, $white, 90%);
			}

			&:active {
				background-color: mix($color-moment-timezone, $black, 90%);
			}
		}
	}

	.success {
		@include font-display;
		text-align: center;
		font-size: 24px;
	}
}
